<template>
  <div class="aside">
    <el-avatar :size="70" :src="userStore.userInfo.avatarUrl" />
    <menuView :activeId="activeId" :list="menuList" @change="handleChange" />
    <el-button @click="logOut">切换账号</el-button>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/modules/user";
import menuView from "@/views/student/menu.vue";
import { ElMessageBox } from "element-plus";

const props = defineProps({
  activeId: String,
  menuList: {
    type: Array,
    default: () => [],
  },
});

const userStore = useUserStore();
const emit = defineEmits(["change"]);

function handleChange(id) {
  emit("change", id);
}

async function logOut() {
  await ElMessageBox.confirm("确定切换账号吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  await userStore.loginOut();
  userStore.clearUserInfo();
  userStore.backLogin();
}
</script>

<style scoped lang="scss">
.aside {
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}
</style>
